<template>
	<view>
		<view class="product-window" :class="attr.cartAttr === true ? 'on' : ''">
			<view class="textpic acea-row row-between-wrapper">
				<view class="pictrue"><image @tap="previewImage" :src="attr.productSelect.image" class="image" /></view>
				<view class="text">
					<view class="line1">{{ attr.productSelect.store_name }}</view>
					<view class="money font-color-origin" v-if="!isIntegral">
						<view class="num moneyNum">￥{{ attr.productSelect.price }}</view>
						<view class="stock">库存: {{ attr.productSelect.stock }}</view>
					</view>
					<view class="money font-color-origin" v-if="isIntegral">
						<view class="num moneyNum">{{ attr.productSelect.integral }}积分</view>
						<view class="stock">库存: {{ attr.productSelect.stock }}</view>
					</view>
				</view>
				<!-- <view class="iconfont icon-guanbi" @click="closeAttr"></view> -->
				<view class="iconfont icon-navbar_close" @click="closeAttr"></view>
			</view>
			<view class="borderLine"></view>
			<view class="productWinList">
				<view class="item" v-for="(item, indexw) in attr.productAttr" :key="indexw">
					<view class="title">{{ item.attrName }}</view>
					<view class="listn acea-row row-middle">
						<view class="itemn" :class="item.index == indexn ? 'on' : ''" v-for="(itemn, indexn) in item.attrValue" @click="tapAttr(indexw, indexn)" :key="indexn">
							{{ itemn.attr }}
						</view>
					</view>
				</view>
			</view>
			<view class="borderLine"></view>
			<view class="cart">
				<view class="title">数量</view>
				<view class="carnum acea-row row-left">
					<view class="item reduce" :class="cartNum <= 1 ? 'on' : ''" @click="CartNumDes">-</view>
					<view class="item num">{{ cartNum }}</view>
					<view class="item plus" :class="cartNum >= attr.productSelect.stock ? 'on' : ''" @click="CartNumAdd">+</view>
				</view>
			</view>
		</view>
		<view class="mask" @touchmove.prevent :hidden="attr.cartAttr === false" @click="closeAttr"></view>
	</view>
</template>
<script>
export default {
	name: 'ProductWindow',
	props: {
		isIntegral: Boolean,
		attr: {
			type: Object,
			default: () => {}
		},
		cartNum: {
			type: Number,
			default: () => 1
		}
	},
	data: function() {
		return {};
	},
	mounted: function() {
		setTimeout(() => {
			console.log(this.attr);
			console.log(this.attr.productSelect);
		}, 5000);
	},
	watch: {
		attr(nextAttr) {}
	},
	methods: {
		closeAttr: function() {
			this.$emit('changeFun', { action: 'changeattr', value: false });
		},
		CartNumDes: function() {
			this.$emit('changeFun', { action: 'ChangeCartNum', value: false });
		},
		CartNumAdd: function() {
			this.$emit('changeFun', { action: 'ChangeCartNum', value: 1 });
		},
		tapAttr: function(indexw, indexn) {
			// 修改商品规格不生效的原因：
			// H5端下面写法，attr更新，但是除H5外其他端不支持，
			// 尽量避免下面的骚写法，不要在子组件内更新props
			// 这里修改是为了能获取到被选中的属性
			this.attr.productAttr[indexw].index = indexn;
			let that = this;
			let value = that
				.getCheckedValue()
				.sort()
				.join(',');
			that.$emit('changeFun', {
				action: 'ChangeAttr',
				value: {
					value,
					indexw,
					indexn
				}
			});
		},
		//获取被选中属性；
		getCheckedValue: function() {
			let productAttr = this.attr.productAttr;
			let value = [];
			for (let i = 0; i < productAttr.length; i++) {
				for (let j = 0; j < productAttr[i].attrValueArr.length; j++) {
					if (productAttr[i].index === j) {
						value.push(productAttr[i].attrValueArr[j]);
					}
				}
			}
			return value;
		},
		previewImage() {
			uni.previewImage({
				current: 0,
				urls: [this.attr.productSelect.image]
			});
		}
	}
};
</script>
<style scoped lang="less">
.stock {
	margin-left: 2rpx !important;
}
.money {
	margin-top: 0 !important;
}
.moneyNum {
	font-size: 32rpx !important;
}

.itemn {
	padding: 16rpx 48rpx !important;
	border-radius: 16rpx !important;
	background: #f5f5f5 !important;
	border: 0 !important;

	font-size: 26rpx !important;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #666666 !important;
	line-height: 37rpx !important;
	border: 2rpx solid #f5f5f5 !important;
}
.productWinList .on {
	border: 2rpx solid #FF5900 !important;
	// background-color: rgba(1, 188, 141, 0.1) !important;

	color: #FF5900!important;

	background: rgba(255,89,0,0.1)!important;
	border: 1rpx solid #FF5900!important;
}
.borderLine {
	margin-top: 40rpx;
	margin-bottom: 14rpx;

	margin-left: 30rpx;
	width: 690rpx;
	height: 2rpx;
	background: #e5e5e5;
}

.cart {
	margin-top: 24rpx !important;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.reduce {
		width: 56rpx !important;
		height: 56rpx !important;
		border-radius: 6rpx 0px 0px 6rpx !important;
		border: 0px solid #cccccc !important;
		background-color: #f5f5f5 !important;
	}
	.num {
		margin-left: 2rpx !important;
		margin-right: 2rpx !important;
		width: 56rpx !important;
		height: 56rpx !important;
		border: 0px solid #cccccc !important;

		background-color: #f5f5f5 !important;
	}
	.plus {
		width: 56rpx !important;
		height: 56rpx !important;
		border-radius: 0px 6rpx 6rpx 0px !important;
		border: 0px solid #cccccc !important;
		background-color: #f5f5f5 !important;
	}
}
.productWinList {
	margin-top: 24rpx !important;
}
.textpic {
	padding-right: 30rpx;
	.text {
		margin-left: 24rpx !important;
		flex: 1 !important;
	}
}
.pictrue {
	width: 208rpx !important;
	height: 208rpx !important;
}
</style>
